<!-- 报修工作人员工单详情界面 -->
<template>
	<view>
		<!-- 工单详情列表表单项 -->
		<view class="content">
			<view class="content-top">
				工单信息
			</view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderID.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderID.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderStatus.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderStatus.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderRequestType.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderRequestType.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.customer.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.customer.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.customer_phone.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.customer_phone.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderRank.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderRank.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderPlace.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderPlace.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderType.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderType.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderContent.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderContent.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderCreatedTime.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderCreatedTime.value}}
				</view>
			</view>
		</view>
		<!-- 工单底部的工作人员的填写反馈项 -->
		<view class="bottom">
			<view class="orderCancel">
				拒绝
			</view>
			<view class="orderAccept" @click="acceptOrder()">
				接受
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentItems: {
					orderID: {
						name: "工单编号",
						value: "202112042154622"
					},
					orderStatus: {
						name: "工单状态",
						value: "待完成"
					},
					orderRequestType: {
						name: "工单类型",
						value: "手机派单"
					},
					customer: {
						name: "派单人",
						value: "马晓峰"
					},
					customer_phone: {
						name: "联系方式",
						value: "17858407426"
					},
					orderRank: {
						name: "工单级别",
						value: "四级"
					},
					orderPlace: {
						name: "维修地点",
						value: "西苑13号楼 423室"
					},
					orderType: {
						name: "维修类型",
						value: "水电类 龙头类"
					},
					orderContent: {
						name: "工单内容",
						value: "水龙头坏了"
					},
					orderCreatedTime: {
						name: "派单时间",
						value: "2021.12.04 09:55:57"
					}
				}
			}
		},
		methods: {
			acceptOrder(){
				uni.navigateTo({
					url:'../repairsWorker_feedback/repairsWorker_feedback'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f2f3f2;
	}

	.content-top {
		padding: 20rpx;
		font-size: 34rpx;
		font-weight: bold;
	}

	.content-item {
		background-color: white;
		display: flex;
		padding: 20rpx;
	}

	.content-item-title {
		width: 200rpx;
	}

	.content-item-detial {
		flex: 1;
	}

	.cross-line {
		width: 100%;
		background: #f0f1f0;
		height: 2rpx;
	}

	.bottom {
		background-color: #f2f3f2;
		width: 100%;
		height: 300rpx;
		padding-top: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		/**内容居中*/
	}

	.orderCancel,
	.orderAccept {
		width: 300rpx;
		height: 80rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/**子view垂直居中*/
		vertical-align: center;
		/**垂直居中*/
		color: white;
		font-size: 34rpx;
		font-weight: 500;
	}

	.orderCancel {
		background-color: #FEC760;
	}

	.orderAccept {
		background-color: #2F9BFE;
	}
</style>
